<template>
  <div class="weather-now">
    <address-bar :text="currCity.name" @click.native="gotoRegion" />
    <tmp-panel :city="currCity" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { AddressBar, TmpPanel } from '@/components'
import WeatherDetail from './WeatherDetail'

export default {
  name: 'weather-now',
  components: { AddressBar, TmpPanel, WeatherDetail },
  props: ['cityName'],
  computed: {
    ...mapState('Home', ['weatherNow', 'weatherNowLoading']),
    ...mapState('Region', ['currCity'])
  },
  methods: {
    ...mapActions('Home', ['getWeatherNow']),
    ...mapActions('Region', ['initRegion']),
    gotoRegion() {
      this.$router.push({ name: 'region-select' })
    }
  },
  mounted() {
    this.initRegion()
    this.getWeatherNow()
  }
}
</script>

<style lang="stylus">
.weather-now {
}
</style>
